<template>
  <div>
    <van-calendar
      :min-date="minDate"
      v-model="show"
      @confirm="onConfirm"
      :show-confirm="false"
      :poppable="false"
      position="top"
      color="#5c89c7"
      class="choosedata"
      row-height="50"
      
    />
    <template v-if="(this.islogin == true || this.islogin == 'true') && record.length">
      <div class="record" v-for="(item,i) in record" :key="i">
        <van-cell-group inset>
          <van-cell center title="日期" :value="item.content" :label="item.timer" />
        </van-cell-group>
      </div>
    </template>

    <van-empty v-else description="暂无记录" />

  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup } from "vant";
import { mapState } from "vuex";
import { Empty } from 'vant';
 import moment from "moment";
Vue.use(Empty);
Vue.use(Cell);
Vue.use(CellGroup);
export default {
  mounted() {
    this.loadData();
    this.init();
  },
  computed: {
    ...mapState(["uid","islogin"]),
  },
  data() {
    return {
      year: "",
      mouth: "",
      day: "",
      show: false,
      minDate: new Date(2022, 1, 1),
      record: [],
      timer:'',
    };
  },
  methods: {
    init(){
      this.timer=moment.unix(parseInt(new Date().getTime()/1000)).format('YYYY-MM-DD')
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.timer=moment.unix(date.getTime()/1000).format('YYYY-MM-DD')
      this.loadData()

    },
    loadData() {
      let url = "v1/users/clock?kid=" + this.uid;
      this.axios.get(url).then((res) => {
        if (res.data.code == 201) {
          return;
        }
        this.record =res.data.data.filter(v=>{
          return v.timer.split(" ")[0]== this.timer
        })
      });
    },
    
  },
};
</script>

<style scoped>
.choosedata {
  height: 300px;
}
.record {
  margin-top: 10px;
}
</style>